<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"> <!-- 知识分类选择器 -->
        <zs-fl-selector @chooseZsfl="handleZsfl"></zs-fl-selector></el-aside>
      <el-container>
        <el-header>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input v-model="queryData.keyWord" placeholder="关键词" @keyup.enter="getDataList()" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getDataList()">
                    查询
                  </el-button>
                  <el-button type="default" @click="resetData()">清空</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-button style="float: right" :disabled="selectedIds.length === 0" type="success" @click="shenheBatch()"
                v-permission="'knowledge.audit'">
                批量允许上线
              </el-button>
            </el-col>
          </el-row></el-header>
        <el-main><el-table :data="tableData" ref="multipleTableRef" @selection-change="handleSelectionChange" border
            stripe style="width: 100%" highlight-current-row>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="知识库标题" width="150" align="center">
              <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                  <template #default>
                    <div>问题类型: {{ scope.row.wtlx }}</div>
                    <div>问题场景: {{ scope.row.wtcj }}</div>
                  </template>
                  <template #reference>
                    {{ scope.row.zsbt }}
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="wtnr" label="问题内容" width="250" align="center" />
            <el-table-column prop="hdnr" label="回答内容" width="250" align="center" />
            <el-table-column fixed="right" label="操作" width="250" align="center">
              <template #default="scope">
                <el-button link type="primary" v-permission="'knowledge.detail'"
                  @click="$router.push({ name: '知识详情', params: { id: scope.row.id } })">
                  详情
                </el-button>
                <el-button link type="success" @click="shenheSingle(scope.row.id)">
                  允许上线
                </el-button>
                <el-button link type="danger" @click="() => {
                  (dialogVisible = true), (notPassForm.zsId = scope.row.id)
                }
                  " v-permission="'knowledge.audit'">
                  不允许上线
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper" />
          <!-- 填写不通过原因的弹窗 -->
          <el-dialog v-model="dialogVisible" title="填写不通过原因">
            <el-form ref="formRef" :model="notPassForm" :rules="rules">
              <el-form-item label="原因" prop="notPassedReason">
                <el-input type="textarea" maxlength="200" minlength="10" show-word-limit
                  v-model="notPassForm.notPassedReason" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetAndCloseForm()">取 消</el-button>
              <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
            </div>
          </el-dialog></el-main>
      </el-container>
    </el-container>
  </div>




</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getListApi, effectiveZsApi, notPassApi } from '@/api/knowledgeBase/knowledge.js'
import {
  ElInput,
  ElMessage,
  ElMessageBox,
  ElTable,
  FormInstance,
  FormRules,
} from 'element-plus'
import ZsFlSelector from '@/views/common/ZsFlSelector.vue'
const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const pageIndex = ref(1)
const pageSize = ref(10)
const totalPage = ref(0)
const tableData = ref([])
const queryData = reactive({
  keyWord: '',
  zsfl: undefined,
})
const dialogVisible = ref(false)
const notPassForm = ref({
  zsId: undefined,
  notPassedReason: undefined,
})
const formRef = ref<FormInstance>()
const selectedIds = ref([]); // 被选中的id集合

// 表单校验
const rules = reactive<FormRules>({
  notPassedReason: [{ required: true, message: '原因不能为空', trigger: 'blur' },
  { min: 10, max: 200, message: '最少10个字符，最多200个字符', trigger: 'blur' },],
})

/**
 * 行checkbox change事件
 */
const handleSelectionChange = (selection: any) => {
  selectedIds.value = selection.map((item: any) => item.id);
}

// 点击分类
const handleZsfl = (zsflId: number) => {
  queryData.zsfl = zsflId

  console.log("知识分类为" + zsflId)
  // 触发查询
  getDataList()
}

// 批量通过审核
const shenheBatch = () => {
  let ids = []
  var selectRows = multipleTableRef.value.getSelectionRows()
  selectRows.forEach(element => {
    ids.push(element.id)
  })
  if (ids.length == 0) {
    ElMessage({
      type: 'warning',
      message: '没有选择待审核的知识',
    })
  } else {
    shenhe(ids)
  }
}

// 重置并关闭弹窗
const resetAndCloseForm = () => {
  notPassForm.value.zsId = undefined
  notPassForm.value.notPassedReason = undefined
  dialogVisible.value = false
}
// 知识审核通过
const shenhe = ids => {
  // 确认是否允许上线
  ElMessageBox.confirm(`确认是否允许上线?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      effectiveZsApi(ids)
        .then(res => {
          ElMessage({
            type: 'success',
            message: '审核成功',
          })

          // 刷新树
          getDataList()
        })
        .catch(e => {
          ElMessage({
            type: 'error',
            message: '审核失败！！！！',
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消审核！！！！',
      })
    })
}

// 单个审核
const shenheSingle = id => {
  // 获取被选择的行的id
  let ids = []
  ids.push(id)

  shenhe(ids)
}

// 修改每页数
const sizeChangeHandle = val => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}
// 修改当前页
const currentChangeHandle = val => {
  pageIndex.value = val
  getDataList()
}

const resetData = () => {
  queryData.keyWord = '',
    queryData.zsfl = undefined

  getDataList()
}

// 获取表格数据
const getDataList = () => {
  getListApi({
    page: pageIndex.value,
    limit: pageSize.value,
    keyWord: queryData.keyWord,
    zsflId: queryData.zsfl,
    status: '0',
  }).then(res => {
    tableData.value = res.data.list
    totalPage.value = res.data.totalPage
  })
}

// 审核不通过
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      notPassApi(notPassForm.value).then(res => {
        // 提示操作成功
        ElMessage({
          type: 'success',
          message: '操作成功',
        })

        // 关闭弹窗
        resetAndCloseForm()

        // 刷新列表
        getDataList()
      })

    } else {
      console.log('error submit!')
      return false
    }
  })
}

getDataList()
</script>
<style>
.dialog-footer {
  text-align: center;
}
</style>
